<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Host families information</title>
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/date.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript">
  jQuery(document).ready(function(){
   //jQuery("#ajaxButton").click(function(){
	//var name = $('#user').val();
	var cityID = "1";
	var clickNumber = "0";
	if($("#isMealProvided option:selected").val()=="Y"){
	    $("#pricePerMeal").show();
	    $("#pricePerMealLabel").show();
	    $("#pricePerMeal").addClass("required");
		}
	else{
		$("#pricePerMeal").hide();
		$("#pricePerMealLabel").hide();
		$("#pricePerMeal").removeClass("required");
		};
    jQuery.ajax({
     type:"POST",
     url:"../jsp/EditHostUser.jsp",
     data: { 
    	 cityID: cityID,
    	 clickNumber: clickNumber,
           },
     success:function(html){
      //jQuery("#responseDiv").text(html);
      var response = $(html);
      //var oneval = response.filter('#one').text();
      $("#city").html(response.filter('#cities').html());
      $("#district").html(response.filter('#districts').html());
      //jQuery("#user").val(response.filter('#one').text());
      $("#publicTransportDistance").val(response.filter('#publicTransportDistance').text());
      $("#minStayDay").val(response.filter('#minStayDay').text());
      $("#maxStayDay").val(response.filter('#maxStayDay').text());
      $("#numberOfAdult").val(response.filter('#numberOfAdult').text());
      $("#numberOfChildren").val(response.filter('#numberOfChildren').text());
      $("#isSmokingAllowed").val(response.filter('#isSmokingAllowed').text());
      $("#isMealProvided").val(response.filter('#isMealProvided').text());
      $("#pricePerMeal").val(response.filter('#pricePerMeal').text());
      $("#isPetHeld").val(response.filter('#isPetHeld').text());
      $("#isInternetProvided").val(response.filter('#isInternetProvided').text());
      //$("#minStayDay").val(response.filter('#one').text());
     }
    });
   //});
   $('#city').change(function() {
    	cityID = $('#city option:selected').val();
    	clickNumber = "1";
        jQuery.ajax({
         type:"POST",
         url:"../jsp/EditHostUser.jsp",
         data: { 
        	 cityID: cityID,
        	 clickNumber: clickNumber,
               },
         success:function(html){
          //jQuery("#responseDiv").text(html);
          var response = $(html);
          //var oneval = response.filter('#one').text();
          //$("#city").html(response.filter('#cities').html());
          $("#district").html(response.filter('#districts').html());
         }
    	});
   });
   $('#isMealProvided').change(function() {
	   if($("#isMealProvided option:selected").val()=="Y"){
		    $("#pricePerMeal").show();
		    $("#pricePerMealLabel").show();
		    $("#pricePerMeal").addClass("required");
			}
		else{
			$("#pricePerMeal").hide();
			$("#pricePerMealLabel").hide();
			$("#pricePerMeal").removeClass("required");
			};
  	});
  });
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#editHostFamily").validate({
			errorElement: "span",
		});
	});
</script>
<body>
						<h1>Edit Host families infomation</h1>
						
						<form id="editHostFamily" method="post" action="../EditHostFamily">

						<div id="city"></div><br>
						<div id="district"></div><br>

						<label>Public Transport Distance<span class="rq"> * </span></label>&nbsp;&nbsp;
						<input id="publicTransportDistance" class="required number" type="text" name="publicTransportDistance"><br><br>

						<label>Minimum Stay Day<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="minStayDay" class="required digits" type="text" name="minStayDay"><br><br>

						<label>Maximum Stay Day<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="maxStayDay" class="required digits" type="text" name="maxStayDay"><br><br>

						<label>Number of Adult<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="numberOfAdult" class="required digits" type="text" name="numberOfAdult"><br><br>

						<label>Number of Children<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="numberOfChildren" class="required digits" type="text" name="numberOfChildren"><br><br>

						<label>Smoking Allowed</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select id="isSmokingAllowed" name="isSmokingAllowed">
							<option value="Y">Yes</option>
							<option value="N">No</option>
						</select><br><br>

						<label>Meal Provided</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select id="isMealProvided" name="isMealProvided">
							<option value="Y">Yes</option>
							<option value="N">No</option>
						</select>
						&nbsp;&nbsp;&nbsp;<label id="pricePerMealLabel">Price Per Meal</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="pricePerMeal" type="text" name="pricePerMeal"><br><br>

						<label>Pet Held</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select id="isPetHeld" name="isPetHeld">
							<option value="Y">Yes</option>
							<option value="N">No</option>
						</select><br><br>

						<label>Internet Provided</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select id="isInternetProvided" name="isInternetProvided">
							<option value="Y">Yes</option>
							<option value="N">No</option>
						</select><br><br>

						<input type="submit" name="Save" value="Save"><br><br><br>
						</form>

</body>
</html>